// 组件中提交数据到Mutaions然后更改状态值最后我们再重新提交给组件二次渲染
// state getters actions mutations 中 state和mutations是必须的 getters和actions是按需的
import Vue from 'vue'
import Vuex from 'vuex'
import { getProlist, getCategoryBrandList } from '@/api' // 引入封装在api下的请求数据的操作

Vue.use(Vuex) // 调用Vuex状态管理器

// 那么我们直接使用的是mutations中定义的方法名来调用提交这个状态的,那么如果遇到重名的问题的话,应该怎么办
// 这时候我们只需要在定义这个模块的时候 namespaced: true 给每个模块加一个命名空间,然后调用的时候使用 模块名/方法名 的方法来提交这个方法即可
// 01.模块化状态管理器
const home = {
  namespaced: true, // 命名空间,不止可以给mutations命名,还可以给actions命名,用法与调用定义在mutations下方法是同样的方式
  state: { // 初始值
    list: []
  },
  actions: { // 定义异步请求数据的方法
    getListAction ({ commit }) {
      return new Promise(resolve => {
        getProlist().then(res => {
          commit({
            type: 'changeList',
            payload: res.data.data
          })
          resolve()
        })
      })
    }
  },
  mutations: { // 唯一的改变状态的地方
    changeList (state, data) {
      state.list = data.payload
    }
  }
}

const kind = {
  namespaced: true,
  state: {
    list: []
  },
  actions: {
    getListAction ({ commit }) {
      return new Promise(resolve => {
        getCategoryBrandList({
          type: '手机',
          brand: 'huawei'
        }).then(res => {
          commit({
            type: 'changeList',
            payload: res.data.data
          })
          resolve()
        })
      })
    }
  },
  mutations: {
    changeList (state, data) {
      state.list = data.payload
    }
  }
}

// 当我们使用原始的状态管理器时,若是我们的组件组要非常非常多的状态的时候,我们的代码store页面中的代码量会边的越来越来冗余,且多个状态夹杂在一块的话就会变得超级超级的杂乱,这时候我们就需要将我们的代码按照一定的规律来划分为一个一个的模块来使用
// 02.创建状态管理器时整合 功能模块
const store = new Vuex.Store({
  modules: {
    home,
    kind
  }
})

// 03.此步骤模拟在组件操作,此后有引入到组件中也是这样的操作,就请求到数据了
store.dispatch('home/getListAction').then(() => {
  // console.log('home', store.state.home)
})
store.dispatch('kind/getListAction').then(() => {
  // console.log('kind', store.state.kind)
})
export default store
